  <div class="my-3 card" data-gj-poll-replace id="batches-table">
    <div class="list-group list-group-flush text-nowrap table-batches" role="table">
      <header class="list-group-item bg-body-tertiary">
        <div class="row small text-muted text-uppercase align-items-center">
          <div class="col-4"><%= t "good_job.models.batch.name" %></div>
          <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.batch.created" %></div>
          <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.batch.enqueued" %></div>
          <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.batch.discarded" %></div>
          <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.batch.finished" %></div>
          <div class="col-lg-1 d-none d-lg-block"><%= t "good_job.models.batch.jobs" %></div>
          <div class="col text-end">
            <%= tag.button type: "button", class: "btn btn-sm text-muted", role: "button",
                           data: { bs_toggle: "collapse", bs_target: ".batch-properties" },
                           aria: { expanded: false, controls: batches.map { |batch| "##{dom_id(batch, 'params')}" }.join(" ") } do %>
              <%= render_icon "info" %>
              <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
            <% end %>
          </div>
        </div>
      </header>

      <% if batches.present? %>
        <% batches.each do |batch| %>
          <div id="<%= dom_id(batch) %>" class="list-group-item py-3" role="row">
            <div class="row align-items-center">
              <div class="col-12 col-lg-4">
                <%= link_to batch_path(batch), class: "text-decoration-none" do %>
                  <code class="small text-muted">
                    <%= batch.id %>
                  </code>
                  <h5 class=""><code><%= batch.on_finish %></code></h5>
                  <div class="text-muted"><%= batch.description %></div>
                <% end %>
              </div>
              <div class="col-6 col-lg-1 text-wrap">
                <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.batch.created_at" %></div>
                <%= relative_time(batch.created_at) %>
              </div>
              <div class="col-6 col-lg-1 text-wrap">
                <% if batch.enqueued_at %>
                  <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.batch.enqueued_at" %></div>
                  <%= relative_time(batch.enqueued_at) %>
                <% end %>
              </div>
              <div class="col-6 col-lg-1 text-wrap">
                <% if batch.discarded_at %>
                  <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.batch.discarded_at" %></div>
                  <%= relative_time(batch.discarded_at) %>
                <% end %>
              </div>
              <div class="col-6 col-lg-1 text-wrap">
                <% if batch.finished_at %>
                  <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.batch.finished_at" %></div>
                  <%= relative_time(batch.finished_at) %>
                <% end %>
              </div>
              <div class="col-6 col-lg-1">
                <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.batch.jobs" %></div>
                <%= batch.jobs.size %>
              </div>
              <div class="col text-end">
                <% if batch.discarded? %>
                  <%= link_to retry_batch_path(batch), method: :put, class: "btn btn-sm btn-outline-primary", title: t("good_job.batches.actions.retry"), data: { confirm: t("good_job.batches.actions.confirm_retry") } do %>
                    <%= render_icon "arrow_clockwise" %>
                    <%= t "good_job.batches.actions.retry" %>
                  <% end %>
                <% end %>
                <%= tag.button type: "button", class: "btn btn-sm text-muted", role: "button",
                               title: t("good_job.actions.inspect"),
                               data: { bs_toggle: "collapse", bs_target: "##{dom_id(batch, 'properties')}" },
                               aria: { expanded: false, controls: dom_id(batch, "state") } do %>
                  <%= render_icon "info" %>
                  <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
                <% end %>
              </div>
            </div>
          </div>
          <%= tag.div id: dom_id(batch, "properties"), class: "batch-properties list-group-item collapse small bg-dark text-light" do %>
            <%= tag.pre JSON.pretty_generate(batch.display_attributes["properties"]) %>
          <% end %>
        <% end %>
      <% else %>
        <div class="list-group-item py-4 text-center text-muted">
          <%= t ".no_batches_found" %>
        </div>
      <% end %>
    </div>
  </div>
